<script >
export default {
    data() {
        return {
            accountEl: null,
            passwordEl: null
        }
    },
    methods: {
        changeAccountInputStyle() {
            this.accountEl = this.$refs.account123
            console.log(this.$refs.account);
            console.log('------------------');
            console.log(this.accountEl)
            this.accountEl.style = "padding: 15px"
            this.accountEl.className = "rounded"
            // this.accountEl.focus()
        },
        passwordRef(el) {
            console.log('passwordRef');
            console.log(el);
            this.passwordEl = el
        },
        changePasswordInputStyle() {
            console.log(this.passwordEl);
            console.log('-------------');
            console.log(this.$refs);
            this.passwordEl.style = "padding: 15px"
            this.passwordEl.className = 'rounded'
            this.passwordEl.focus()
        }
    }
}
</script>

<template>
    账号：<input type="text" ref="account123" >
    <input type="button" value="改变" @click="changeAccountInputStyle">
    <hr>
    密码： <input type="password" :ref="passwordRef">
    <input type="button" value="改变" @click="changePasswordInputStyle">
</template>

<style scoped>
.rounded {
    border-radius: 15px;
}
</style>
